@()(implicit session: Session)
    @home.main("测试结果") {


        <div class="panel panel-default" style="margin: 20px;
            height: 90px;
            box-shadow: 0 0 20px #ddd;
            text-align: center;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            line-height: 50px;
            font-weight: 500;" id="exam">
            <h3>测试结果</h3>
        </div>

        <div class="panel panel-default" style="margin: 20px;
            box-shadow: 0 0 20px #ddd;">

            <div class="panel-body" style="height: 630px">
                <div id="contain">
                    <h4><a onclick="rebackHome()"><i class="fa fa-arrow-left"></i> 返回首页</a></h4>

                    <h2 style="margin-left: 30px">您的正确率 ： <b id="score"></b></h2>

                    <div id="container" style="min-width: 400px;
                        height: 400px"></div>

                </div>
            </div>
        </div>
        <script>
                $(function () {

                    $.ajax({
                        url: "@routes.QuestionController.getResult()",
                        type: "get",
                        success: function (data) {
                            column(data.base, data.speziell);
                            $("#score").text(data.score)
                        }
                    });

                });


                function column(a1, a2) {
                    var chart = Highcharts.chart('container', {
                        chart: {
                            type: 'column'
                        },
                        title: {
                            text: '结果统计'
                        },
                        xAxis: {
                            categories: ['生物安全相关法律法规', '生物危害因子的风险评估', '生物安全实验室的分级及管理', "生物安全实验室设施",
                                "生物安全实验室关键设备", "消毒灭菌及废物处理", "突发事故的处理和应急预案", "实验室个人防护", "菌毒种运输及管理", "实验操作"],
                            crosshair: true
                        },
                        yAxis: {
                            min: 0,
                            max: 100,
                            title: {
                                text: '正确率'
                            }
                        },
                        exporting: {
                            enabled: false
                        },
                        tooltip: {
                            // head + 每个 point + footer 拼接成完整的 table
                            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                            '<td style="padding:0"><b>{point.y:.1f}%</b></td></tr>',
                            footerFormat: '</table>',
                            shared: true,
                            useHTML: true
                        },
                        plotOptions: {
                            column: {
                                borderWidth: 0
                            }
                        },
                        series: [{
                            name: '基础知识题',
                            data: a1,
                            color: "#90ED7D"
                        }, {
                            name: '专业知识题',
                            data: a2,
                            color: "#7CB5EC"
                        }]
                    });
                }

        </script>

    }